<template>
  <div class="bcf pos-r">
    <div class="">
      <div style="width: 70vw;margin: 0 auto;" class="padt10">
        <mu-tabs inverse :value.sync="editTab">
          <mu-tab value="main">基本信息</mu-tab>
          <mu-tab value="product" v-if="model.id > 0">产品信息</mu-tab>
          <mu-tab value="import_need" v-if="model.id > 0">从采购申请单导入</mu-tab>
          <mu-tab value="import_inquiry" v-if="model.id > 0">从采购询价单导入</mu-tab>
        </mu-tabs>
        <div class="bcf bdso pad5" v-show="editTab === 'main'" style="width: 70vw;min-height: 60vh">
          <EzData ref="editForm" :config="configEdit.main()" v-model="model" :key="editKey"></EzData>
        </div>
        <div class="bcf bdso pad5" v-if="editTab === 'product'" style="width: 70vw;min-height: 60vh">
          <InquiryFeedbackProduct :base="{belongToId:model.id}" :params="{belongToId:model.id}"
                                  :key="productListKey"></InquiryFeedbackProduct>
        </div>
        <div class="bcf bdso pad5" v-if="editTab === 'import_need'" style="width: 70vw;min-height: 60vh">
          <title-a>选择采购申请</title-a>
          <div class="mu-form-item flex-r">
            <div class="flex1"><EzSearch :config="needSearchConfig" v-model="needId" key="needSearchConfig"></EzSearch></div>
            <div v-show="needProductSelected.length > 0">
              <mu-button flat small color="primary" @click="importNeedProduct">
                <mu-icon value="add" right></mu-icon>
                导入选中清单项目
              </mu-button>
            </div>
          </div>
          <title-a>采购清单</title-a>
          <mu-data-table checkbox select-all selectable :selects.sync="needProductSelected" stripe
                         :columns="needProductTableConfig" height="400" :data="needProduct" rowKey="id" >
            <template slot-scope="scope">
              <td :align="col.align" v-for="col in needProductTableConfig" :key="`${scope.row.id}${col.name}`">
                <!--这个ID只是一个自定义的示例-->
                <div :class="`ez-${col.align}`" v-if="col.name === 'id'">{{ scope.row.id }}</div>
                <EzListViewer :class="`ez-${col.align}`" v-else :config="col" :row="scope.row"></EzListViewer>
              </td>
            </template>
          </mu-data-table>
        </div>
        <div class="bcf bdso pad5" v-if="editTab === 'import_inquiry'" style="width: 70vw;min-height: 60vh">
          <title-a>选择采购询价</title-a>
          <div class="mu-form-item flex-r">
            <div class="flex1"><EzSearch :config="inquirySearchConfig" v-model="inquiryId" key="inquirySearchConfig"></EzSearch></div>
            <div v-show="inquiryProductSelected.length > 0">
              <mu-button flat small color="primary" @click="importInquiryProduct">
                <mu-icon value="add" right></mu-icon>
                导入选中清单项目
              </mu-button>
            </div>
          </div>
          <title-a>采购清单</title-a>
          <mu-data-table checkbox select-all selectable :selects.sync="inquiryProductSelected" stripe
                         :columns="inquiryProductTableConfig" height="400" :data="inquiryProduct" rowKey="id" >
            <template slot-scope="scope">
              <td :align="col.align" v-for="col in inquiryProductTableConfig" :key="`${scope.row.id}${col.name}`">
                <!--这个ID只是一个自定义的示例-->
                <div :class="`ez-${col.align}`" v-if="col.name === 'id'">{{ scope.row.id }}</div>
                <EzListViewer :class="`ez-${col.align}`" v-else :config="col" :row="scope.row"></EzListViewer>
              </td>
            </template>
          </mu-data-table>
        </div>
      </div>
    </div>
    <div class="w100 tac padt10">
      <mu-button class="mar1" color="primary" @click="save">
        <mu-icon left value="save"></mu-icon>
        保存
      </mu-button>
      <mu-button class="mar1" color="warning" @click="cancelEdit">
        <mu-icon left value="close"></mu-icon>
        取消
      </mu-button>
    </div>
    <div class="pos-a t0 l0 pad10" v-if="!isComp">
      <mu-button color="primary" icon @click="goback(-1)">
        <mu-icon value="arrow_back"></mu-icon>
      </mu-button>
    </div>
  </div>
</template>

<script>
import mixin_edit from "./js/mixin_edit";
import EzData from "@/comps/EzData";
import InquiryProduct from "@/pages/v1/erp/InquiryProduct/InquiryProduct.vue";
import InquiryFeedback from "@/pages/v1/erp/InquiryFeedback/print.vue";
import InquiryFeedbackProduct from "@/pages/v1/erp/InquiryFeedbackProduct/InquiryFeedbackProduct.vue";
import EzListViewer from "@/comps/list/EzListViewer.vue";
import EzSearch from "@/comps/form/EzSearch.vue";
import TitleA from "@/comps/comm/TitleA.vue";
import EzSearchConfig from "@/comps/form/EzSearchConfig";
import apiNeed from "@/pages/v1/erp/Need/js/apiNeed";
import listBuilder from "@/comps/list/listBuilder";
import apiNeedProduct from "@/pages/v1/erp/NeedProduct/js/apiNeedProduct";
import apiInquiryFeedback from "@/pages/v1/erp/InquiryFeedback/js/apiInquiryFeedback";
import apiInquiry from "@/pages/v1/erp/Inquiry/js/apiInquiry";
import apiInquiryProduct from "@/pages/v1/erp/InquiryProduct/js/apiInquiryProduct";

export default {
  name: "v1-erp-InquiryFeedback-edit",
  components: {TitleA, EzSearch, EzListViewer, InquiryFeedbackProduct, InquiryFeedback, InquiryProduct, EzData},
  mixins: [mixin_edit],
  data() {
    let needSearchConfig = EzSearchConfig()
    needSearchConfig
        .setApi(apiNeed.urlChoice)
        .setApiSearchKeys(["sn__regex", "title__regex"])

    let lb = listBuilder()
    lb.add("id","#",80)
    lb.add("product","产品",180).setListIsObjectName()
    lb.add("num","数量",80)
    lb.add("unit","单位",80).setListIsObjectName()
    lb.add("price","参考价格",80)
    lb.add("note","备注",0)
    lb.add("row","RN",80)

    let inquirySearchConfig = EzSearchConfig()
    inquirySearchConfig
        .setApi(apiInquiry.urlChoice)
        .setApiSearchKeys(["sn__regex", "title__regex"])

    let lbInquiry = listBuilder()
    lbInquiry.add("id","#",80)
    lbInquiry.add("product","产品",180).setListIsObjectName()
    lbInquiry.add("num","数量",80)
    lbInquiry.add("unit","单位",80).setListIsObjectName()
    lbInquiry.add("price","参考价格",80)
    lbInquiry.add("note","备注",0)
    lbInquiry.add("row","RN",80)
    return {
      productListKey:"",

      needId: 0,
      needSearchConfig,
      needProduct:[],
      needProductSelected:[],
      needProductTableConfig:lb.headers,

      inquiryId: 0,
      inquirySearchConfig,
      inquiryProduct:[],
      inquiryProductSelected:[],
      inquiryProductTableConfig:lbInquiry.headers
    }
  },
  mounted() {
  },
  methods:{
    getNeedProduct(){
      apiNeedProduct.findBy({
        _where:{belongToId:this.needId},
        _dumps:["belongTo","product","unit","tax"],
        page:1, limit:0,
      },res=>{this.needProduct = res})
    },
    importNeedProduct(){
      let selectedId =[]
      for (let index of this.needProductSelected) {
        selectedId.push(this.needProduct[index].id)
      }
      apiInquiryFeedback.importProduct({
        id:this.model.id,
        productIds:selectedId,
        from:"need",
      },res=>{
        this.$toast.success(res.message)
        this.getNeedProduct()
        this.editTab = "product"
      })
    },
    getInquiryProduct(){
      apiInquiryProduct.findBy({
        _where:{belongToId:this.inquiryId},
        _dumps:["belongTo","product","unit","tax"],
        page:1, limit:0,
      },res=>{this.inquiryProduct = res})
    },
    importInquiryProduct(){
      let selectedId =[]
      for (let index of this.inquiryProductSelected) {
        selectedId.push(this.inquiryProduct[index].id)
      }
      apiInquiryFeedback.importProduct({
        id:this.model.id,
        productIds:selectedId,
        from:"inquiry",
      },res=>{
        this.$toast.success(res.message)
        this.getNeedProduct()
        this.editTab = "product"
      })
    },
  },
  watch:{
    needId(){
      this.getNeedProduct()
    },
    inquiryId(){
      this.getInquiryProduct()
    }
  }
}
</script>

<style scoped>

</style>